<template>
	<view class="container container329916">
		<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 flex-direction-column">
			<view class="flex diygw-col-24">
				<swiper :current="swiperIndex" class="swiper swiper-indicator_rect_radius" @change="changeSwiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 300rpx">
					<swiper-item v-for="(item, index) in data.data.imgs" :key="index" class="diygw-swiper-item">
						<view class="diygw-swiper-item-wrap">
							<image :src="item" class="diygw-swiper-image"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex6-clz">
				<view class="flex flex-wrap diygw-col-24 items-baseline">
					<view class="flex flex-wrap diygw-col-0 items-baseline flex15-clz">
						<text class="diygw-col-0 text8-clz"> ￥ </text>
						<text class="diygw-col-0 text-clz">
							{{ data.data.price }}
						</text>
						<text class="diygw-text-line2 diygw-col-0 text9-clz">
							{{ data.data.linePrice }}
						</text>
					</view>
					<text class="diygw-text-line2 diygw-col-0"> 已售{{ data.data.sellamonut }}件 </text>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex2-clz">
					<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex3-clz">
						<text class="diygw-text-line2 diygw-col-24 text11-clz">
							{{ data.data.title }}
						</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="flex diygw-btn-default flex-wrap diygw-col-0 flex-direction-column items-center flex4-clz" open-type="share">
						<text class="flex icon diygw-col-0 diy-icon-forward"></text>
						<text class="diygw-text-line2 diygw-col-0"> 分享 </text>
					</button>
					<!--  #endif -->
				</view>
			</view>
			<view v-if="data.data.skuType == 2" class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex17-clz">
				<view class="flex flex-wrap diygw-col-24 items-center">
					<text class="diygw-text-line2 diygw-col-0"> 选择： </text>
					<view @click="uskuData.show = true" class="diygw-col-0 usku-clz">
						{{ data.data.skusText }}
					</view>
					<diy-sku :stockTotal="uskuData.stockTotal" v-model="uskuData.show" @buyNow="buyNowUsku" @addCart="addCartUsku" :price="uskuData.price" :thumb="uskuData.thumb" :isBuyNow="uskuData.isBuyNow" :isMulti="uskuData.isMulti" addCartBackground="#fbbd08" :isAddCart="uskuData.isAddCart" :specList="uskuData.specs" :skuList="uskuData.skus" v-slot:sku="{ specMap, disable, active, row }">
						<diy-sku-item :row="row" :specMap="specMap" :disable="disable" :active="active"></diy-sku-item>
					</diy-sku>
					<text @click="uskuData.show = true" class="flex icon5 diygw-col-0 diy-icon-right"></text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex12-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-center">
					<view class="flex flex-wrap diygw-col-0 items-center">
						<text @click="uskuData.show = true" class="flex icon8 diygw-col-0 icon8-clz diy-icon-roundcheck"></text>
						<text class="diygw-text-line2 diygw-col-0"> 七天无理由退货 </text>
					</view>
					<view class="flex flex-wrap diygw-col-0 items-center flex14-clz">
						<text @click="uskuData.show = true" class="flex icon7 diygw-col-0 icon7-clz diy-icon-roundcheck"></text>
						<text class="diygw-text-line2 diygw-col-0"> 48小时内发货 </text>
					</view>
					<text @click="uskuData.show = true" class="flex icon4 diygw-col-0 diy-icon-right"></text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex5-clz">
				<text class="diygw-text-line2 diygw-col-24 text6-clz"> 商品描述 </text>
				<mp-html :content="data.data.content" class="diygw-col-24"></mp-html>
			</view>
		</view>
		<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start items-center diygw-bottom flex8-clz">
			<button class="flex diygw-btn-default flex-wrap diygw-col-0 flex-direction-column items-center flex10-clz" @tap="navigateTo" data-type="page" data-url="/pages/index" data-redirect="1">
				<text class="flex icon2 diygw-col-0 diy-icon-home"></text>
				<text class="diygw-text-line2 diygw-col-0"> 首页 </text>
			</button>
			<button class="flex diygw-btn-default flex-wrap diygw-col-0 flex-direction-column items-center flex11-clz" @tap="navigateTo" data-type="page" data-url="/pages/cart">
				<text class="flex icon3 diygw-col-0 diy-icon-cart"></text>
				<text class="diygw-text-line2 diygw-col-0"> 购物车 </text>
			</button>
			<view class="flex flex-wrap diygw-col-0 justify-center items-center flex20-clz" @tap="navigateTo" data-type="addCartFunction" data-action-type="1">
				<text class="diygw-col-0"> 加入购物车 </text>
			</view>
			<view class="flex flex-wrap diygw-col-0 justify-center items-center flex9-clz" @tap="navigateTo" data-type="addCartFunction" data-action-type="2">
				<text class="diygw-col-0"> 立即购买 </text>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				dataNum: 1,
				data: {
					code: 200,
					msg: 'success',
					data: {
						id: 1,
						title: '商品名称',
						remark: '商品描述',
						img: 'http://f.com/storage/image/20241002/fc98f12cfcf1022dd5f0bdb6e4838db856f10e8d.png',
						imgs: '["http:\\/\\/cdn.diygw.com\\/image\\/20240903\\/a3a8c84965da49874f4443788f586797581d9605.png"]',
						status: '1',
						content: '<p>23123</p>',
						price: '3.00',
						amount: 5,
						sellamonut: null,
						skus: '{"skus":[],"specs":[]}',
						sortnum: null,
						cateId: 2,
						userId: 1,
						createTime: '2024-10-01 18:05:41',
						updateTime: '2024-10-01 20:02:56',
						deleteTime: null,
						linePrice: '3.00',
						skuType: '1'
					}
				},
				swiperIndex: 0,
				uskuData: {
					isMulti: true,
					skus: [],
					specs: [],
					show: false,
					isBuyNow: true,
					isAddCart: true,
					stockTotal: 0,
					price: 1,
					thumb: ''
				},
				usku: {}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				this.dataApi();
			},
			// 文章数据 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/shop/api.goods/get';
				let http_data = {
					pageNum: this.dataNum,
					pageSize: 10,
					id: param.id || this.globalOption.id || '1'
				};
				let http_header = {};

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				if (!data.data) {
					this.showToast('详情不存在');
					uni.navigateBack();
					return;
				}
				data.data.imgs = data.data.imgs ? JSON.parse(data.data.imgs) : [data.data.img];
				data.data.skus = data.data.skus ? JSON.parse(data.data.skus) : [];
				//如果是多规格内容
				if (data.data.skuType == 2) {
					data.data.skusText = data.data.skus.specs
						.map((item) => {
							return item.title;
						})
						.join(' ');
				} else {
					data.data.skusText = '';
				}

				this.data = data;
				this.globalData.isshow = true;
				uni.setNavigationBarTitle({
					title: data.data.title
				});
			},

			// 加入购物车或购买 自定义方法
			async addCartFunction(param) {
				let thiz = this;
				let actionType = param && (param.actionType || param.actionType == 0) ? param.actionType : '1';
				if (!this.$session.getToken()) {
					//比如未登录，转身到其他页面等
					this.showToast('请先登录');
					this.navigateTo({
						type: 'page',
						url: 'login'
					});
					return;
				}
				if (this.data.data.skuType == 1) {
					let carts = this.$session.getUserValue('carts');
					if (!carts) {
						carts = [];
					}
					//查找购物车里是否已存在该数据，如果存在则不加入
					let index = carts.findIndex((item) => {
						return item.id == this.data.data.id;
					});
					if (index >= 0) {
						carts.splice(index, 1);
					}
					let data = JSON.parse(JSON.stringify(this.data.data));
					data.number = 1;
					carts.push(data);
					this.$session.setUserValue('carts', carts);
					if (actionType == 1) {
						this.showToast('加入购物车成功');
					} else {
						this.navigateTo({
							type: 'page',
							url: 'cart'
						});
					}
				} else {
					//把当前数据的多规格给到多规格组件里。
					this.uskuData.skus = this.data.data.skus.skus;
					this.uskuData.specs = this.data.data.skus.specs;
					this.uskuData.show = true;
				}
			},

			// 多规格回调 自定义方法
			async addCartBySkuFunction(param) {
				let thiz = this;
				let actionType = param && (param.actionType || param.actionType == 0) ? param.actionType : '1';
				if (!this.$session.getToken()) {
					//比如未登录，转身到其他页面等
					this.showToast('请先登录');
					this.navigateTo({
						type: 'page',
						url: 'login'
					});
					return;
				}
				let carts = this.$session.getUserValue('carts');
				if (!carts) {
					carts = [];
				}
				//查找购物车里是否已存在该数据，如果存在则不加入
				let index = carts.findIndex((item) => {
					return item.id == this.data.data.id && item.specIds == this.usku.specIds;
				});
				if (index >= 0) {
					carts.splice(index, 1);
				}
				let data = JSON.parse(JSON.stringify(this.data.data));
				data = Object.assign(data, this.usku);
				if (this.usku.keywords) {
					data.title = this.data.data.title + ' ' + this.usku.keywords;
				}

				data.number = this.usku.buyNum;
				carts.push(data);
				this.$session.setUserValue('carts', carts);
				if (actionType == 1) {
					this.showToast('加入购物车成功');
				} else {
					this.navigateTo({
						type: 'page',
						url: 'cart'
					});
				}
			},
			changeSwiper(evt) {
				let swiperIndex = evt.detail.current;
				this.setData({ swiperIndex });
			},
			addCartUsku(evt) {
				this.usku = evt;
				this.navigateTo({ actionType: 1, type: 'addCartBySkuFunction' });
			},
			buyNowUsku(evt) {
				this.usku = evt;
				this.navigateTo({ actionType: 2, type: 'addCartBySkuFunction' });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-title {
		background-color: rgba(0, 0, 0, 0.281);
	}
	.flex6-clz {
		background-color: #ffffff;
		margin-left: 0rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		padding-bottom: 20rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 20rpx;
	}
	.flex15-clz {
		flex: 1;
	}
	.text8-clz {
		color: #f20000;
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.text-clz {
		color: #f20000;
		font-weight: bold;
		font-size: 32rpx !important;
	}
	.text9-clz {
		text-decoration: line-through;
	}
	.flex2-clz {
		padding-top: 16rpx;
		padding-left: 0rpx;
		padding-bottom: 0rpx;
		padding-right: 0rpx;
	}
	.flex3-clz {
		flex: 1;
	}
	.text11-clz {
		font-size: 28rpx !important;
	}
	.flex4-clz {
		background-color: #ffffff;
		padding-top: 0rpx;
		border-left: 2rpx solid #ededed;
		padding-left: 16rpx;
		padding-bottom: 0rpx;
		padding-right: 0rpx;
	}
	.icon {
		font-size: 40rpx;
	}
	.flex17-clz {
		background-color: #ffffff;
		margin-left: 0rpx;
		padding-top: 20rpx;
		color: #888;
		padding-left: 20rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 20rpx;
	}
	.usku-clz {
		flex: 1;
	}
	.icon5 {
		font-size: 32rpx;
	}
	.flex12-clz {
		margin-left: 0rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 20rpx;
	}
	.icon8-clz {
		color: #f20000;
	}
	.icon8 {
		font-size: 36rpx;
	}
	.flex14-clz {
		padding-top: 0rpx;
		flex: 1;
		padding-left: 10rpx;
		padding-bottom: 0rpx;
		padding-right: 0rpx;
	}
	.icon7-clz {
		color: #f20000;
	}
	.icon7 {
		font-size: 36rpx;
	}
	.icon4 {
		font-size: 32rpx;
	}
	.flex5-clz {
		background-color: #ffffff;
		margin-left: 0rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 20rpx;
	}
	.text6-clz {
		margin-left: 0rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		font-size: 28rpx !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
	}
	.flex8-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 0rpx;
		color: #747474;
		bottom: 0rpx;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 20rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		left: 0rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
		padding-right: 16rpx;
	}
	.flex10-clz {
		background-color: #ffffff;
		padding-top: 0rpx;
		padding-left: 16rpx;
		padding-bottom: 0rpx;
		padding-right: 16rpx;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.flex11-clz {
		background-color: #ffffff;
		padding-top: 0rpx;
		padding-left: 16rpx;
		padding-bottom: 0rpx;
		padding-right: 16rpx;
	}
	.icon3 {
		font-size: 40rpx;
	}
	.flex20-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 200rpx;
		color: #ffffff;
		font-weight: bold;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-right-radius: 200rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 200rpx;
		margin-top: 0rpx;
		border-bottom-right-radius: 200rpx;
		background-image: linear-gradient(to right, #ffb100, #ffb900);
		margin-bottom: 0rpx;
		padding-right: 10rpx;
	}
	.flex9-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 200rpx;
		color: #ffffff;
		font-weight: bold;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-right-radius: 200rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 200rpx;
		margin-top: 0rpx;
		border-bottom-right-radius: 200rpx;
		background-image: linear-gradient(to right, #fa2209, #ff6335);
		margin-bottom: 0rpx;
		padding-right: 10rpx;
	}
	.container329916 {
		background-color: #f5f5f5;
	}
</style>
